<script setup>
	import { ref } from 'vue';
	const isActive = ref(true)
</script>


<template>
	<div>
		<!-- class 动态绑定 -->
		<!-- 三元表达式 -->
		<p :class="isActive ? 'active' : ''">active1</p>
		<!-- 对象 .class: boolean  类型：条件 -->
		<p :class="{'active': isActive}">active2</p>
		<!-- 动态class与静态class混合使用 -->
		<p :class="{'active': isActive}" class="item">active3</p>
	</div>
</template>


<style scoped>
	.item {
		font-size: 40px;
	}
	.active {
		color: red;
	}
</style>
